import { useMemo, useRef } from 'react';

import Chart from './Chart';
const labels = ['利润总额', '净利润', '销售利润率', '净资产收益率', '盈余现金保障倍数'];
const rgb = {
  blue: '53, 157, 255',
  yellow: '245, 168, 70',
  green: '112, 182, 4',
};
const list = [
  {
    title: '创效规模',
    value: 76.11,
    children: [
      { title: '利润总额', value: 5 },
      { title: '净利润', value: 12 },
    ],
  },
  {
    title: '创效水平',
    value: 86.11,
    children: [
      { title: '销售利润率', value: 15 },
      { title: '净资产收益率', value: 10 },
    ],
  },
  {
    title: '创效质量',
    value: 74.11,
    children: [{ title: '盈余现金保障倍数', value: 8 }],
  },
];
const colors = [rgb.blue, rgb.yellow, rgb.green];
const TreeBlockBar = () => {
  const divRef = useRef<HTMLDivElement>(null);
  const option = useMemo(() => {
    const titleTextStyle = (color: string) => ({
      color: `rgb(${color})`,
      fontSize: 16,
      fontWeight: 400,
    });

    const data: any[] = [];
    const myColors: string[] = [];
    list.forEach((t, i) => {
      const color = colors[i % colors.length];

      t.children.forEach((item) => {
        myColors.push(color);
        data.push({
          value: item.value,
          label: {
            formatter: `${item.title}，{c}分`,
            show: true,
            position: 'top',
            color: `rgb(${color})`,
          },
          itemStyle: {
            color: `rgb(${color})`,
          },
        });
      });
    });
    console.log(myColors);
    return {
      // title: [
      //   {
      //     text: '创效规模，76.11分',
      //     left: 20,
      //     textAlign: 'left',
      //     textStyle: titleTextStyle(rgb.blue),
      //   },
      //   {
      //     text: '创效水平，86.11分',
      //     left: '41%',
      //     textAlign: 'left',
      //     textStyle: titleTextStyle(rgb.yellow),
      //   },
      //   {
      //     text: '创效质量，75.11分',
      //     left: '80%',
      //     textAlign: 'left',
      //     textStyle: titleTextStyle(rgb.green),
      //   },
      // ],
      grid: {
        top: 30,
        left: 0,
        bottom: 0,
        right: 0,
        containLabel: true,
      },
      tooltip: {
        borderWidth: 0,
        padding: 10,
        show: true,
        trigger: 'item',
        formatter: (params: any) => {
          const { marker, name, value } = params;
          return `${marker} ${name} ${value}分<br/><span style="font-size:12px">当前结果值: ${12}%<span/><br/><span style="font-size:12px">历史最大结果值: ${22}%</span>`;
        },
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            type: [8, 4],
          },
        },
      },
      xAxis: {
        type: 'category',
        data: labels,
        gridIndex: 0,
        axisLabel: {
          interval: 0,
        },
        axisTick: {
          alignWithLabel: true,
          interval: 0,
        },

        splitArea: {
          interval: 0,
          show: true,
          areaStyle: {
            color: myColors.map((t) => `rgba(${t}, 0.1)`),
          },
        },
      },

      series: [
        {
          barWidth: '40%',

          type: 'bar',
          itemStyle: { borderRadius: 4 },

          data: data,
        },
      ],
    };
  }, []);
  return (
    <div ref={divRef}>
      <Chart option={option} style={{ height: 400, width: '100%' }} />
    </div>
  );
};

export default TreeBlockBar;
